<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/v-charts.min.js"></script>

    <title>Document</title>
</head>
<body>
<div id="home">
    <el-row style="margin-bottom: 10px;">
        <el-col :span="8">
            <el-card shadow="hover">
                视频数：{{ videoNum }}
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="hover">
                用户数：{{ userNum }}
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="hover">
                当前在线人数：{{ liveNum }}
            </el-card>
        </el-col>
    </el-row>
    <el-row style="padding: 0 10% 0;">
        <el-col :span="10">
            <ve-map :data="chartData" :settings="chartSettings"></ve-map>
        </el-col>
        <el-col :span="10" style="float: right">
            <ve-line :data="chartData2" :extend="extend"></ve-line>
        </el-col>
    </el-row>
    <h3>今日工作安排</h3>
    <el-row>
        <el-steps :active="2" align-center>
            <el-step title="9:00-12:00" description="方块物体空间转移"></el-step>
            <el-step title="12:00-13:00" description="休息"></el-step>
            <el-step title="13:00-17:00" description="方块物体空间转移"></el-step>
            <el-step title="17:00-18:00" description="休息"></el-step>
            <el-step title="18:00-21:00" description="方块物体空间转移"></el-step>
        </el-steps>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: '#home',
        data() {
            this.chartSettings = {
                position: 'china',
                dimension: '位置',
                metrics: ['访问量'],
            };
            this.extend = {
                series: {
                    label: {
                        normal: {
                            show: true
                        }
                    }
                }
            };
            return {
                activeName: '1',
                videoNum: '135135123121454',
                userNum: '8215698412',
                liveNum: '656025654',
                chartData: {
                    columns: ['位置', '访问量'],
                    rows: [
                        { '位置': '吉林', '访问量': 1225423 },
                        { '位置': '北京', '访问量': 12245223 },
                        { '位置': '上海', '访问量': 2135423 },
                        { '位置': '浙江', '访问量': 415435423 }
                    ]
                },
                chartData2: {
                    columns: ['日期', '访问用户', '营收'],
                    rows: [
                        { '日期': '2019/6/1', '访问用户': 5235435, '营收': 109321 },
                        { '日期': '2019/6/2', '访问用户': 4464646, '营收': 424455 },
                        { '日期': '2019/6/3', '访问用户': 6542923, '营收': 124455 },
                        { '日期': '2019/6/4', '访问用户': 5631723, '营收': 245655 },
                        { '日期': '2019/6/5', '访问用户': 4453792, '营收': 475855 },
                        { '日期': '2019/6/6', '访问用户': 6514593, '营收': 456522 }
                    ]
                }
            }
        },
        method: {}
    });
</script>
</html>
